<!--
 * @Author: yovi
 * @Date: 2019-11-21 10:20:56
 * @LastEditTime: 2019-11-21 16:56:06
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \YouYouFo\you-you-go\src\common\Comment.vue
 -->
<template>
  <div class="commentBox">
    <h2>发表评论</h2>
    <hr />
    <van-field
      ref="commentFieldRef"
      type="textarea"
      style="border:1px solid gray"
      v-model="commentValue"
      placeholder="请输入评论"
    />
    <van-button @click="postComment" style="width:100%;margin:3px 0" type="info">发表评论</van-button>
    <van-list :finished="finished" v-for="(item,index) in list" :key="index">
      <div
        class="title"
      >第{{index+1}}楼 用户:{{item.user_name}} 发表时间:{{$moment(item.add_time).format("YYYY-MM-DD")}}</div>
      <div class="body">{{item.content}}</div>
    </van-list>
    <van-button @click="loadComment" style="width:100%" color="#f44" plain>加载更多</van-button>
  </div>
</template>
           
<script>
import { getcomments } from '@/api/index.js'
export default {
  props: {
    //传入的获取评论函数
    getCommentFun: { type: Function },
    //传入的提交评论函数
    postCommentFun: { type: Function },
    // 传入的id
    viId: { type: Number },
    // 传入的起始页,默认为1
    pageIndex: { type: Number, default: 1 }
  },
  data() {
    return {
      commentValue: '',
      list: [],
      finished: true,
      pgIndex: this.pageIndex
    }
  },
  created() {
    this.getcomments(this.viId, this.pgIndex)
  },
  methods: {
    async getcomments(id, index) {
      const { data: res } = await this.getCommentFun(id, index)
      if (index === 1) {
        this.list = res.message
      } else {
        this.list = [...this.list, ...res.message]
      }
    },
    loadComment() {
      this.getcomments(this.viId, this.pgIndex++)
    },
    async postComment() {
      const { data: res } = await this.postCommentFun(this.viId, this.commentValue)  
      this.commentValue = ''
      this.getcomments(this.viId, this.pageIndex)
    }
  }
}
</script>
<style lang="less" scoped>
.commentBox {
  padding: 0 5px;
}
.van-field {
  height: 100px;
}
.van-list {
  width: 100%;
  .title {
    width: 100%;
    height: 30px;
    line-height: 30px;
    background-color: #ccc;
    font-size: 12px;
  }
  .body {
    width: 100%;
    height: 35px;
    line-height: 35px;
    text-indent: 2em;
    font-size: 12px;
  }
}
</style>